<template>
  <div class="comments-list">
    <div class="comment-item-avatar">
      <avatars :avatar-name="comments.nickname"/>
    </div>
    <div class="comment-item-warp">
      <div class="warp-header">
        <div>
          <span class="warp-username">{{ comments.nickname }}</span>
          <span>{{ timeDiff(comments.createTime) }}</span>
        </div>
        <div class="warp-actions">
          <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1715" width="12"
               height="12">
            <path
                d="M475 276V141.4c-12.1-56.3-58.2-22-58.2-22L96.6 395.9c-70.4 48.9-4.8 85.7-4.8 85.7l315.4 274.1c63.1 46.5 67.9-24.5 67.9-24.5V606.4C795.3 506 926.3 907.5 926.3 907.5c12.1 22 19.4 0 19.4 0C1069.4 305.4 475 276 475 276z"
                p-id="1716" fill="#707070"></path>
          </svg>
          引用回复
        </div>
      </div>
      <div class="comment-body">
        <VueMdItem :textarea="comments.content"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import {dateDiff} from "@/utils/time"
import VueMdItem from '../../components/vue-markdown-it.vue'
import avatars from "./avatars.vue";

const props = defineProps({
  comments: {
    type: Object,
    default: {}
  }
})
const timeDiff = (val) => {
  return dateDiff(val)
}


</script>

<style scoped>
.comments-list {
  margin-top: 20px;
  display: flex;
}

.comment-item-avatar {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  overflow: hidden;
  -webkit-box-flex: 0;
  flex: none;
  margin-right: 16px;
  border: 1px solid #ddd;
  padding: 3px;
}

.comment-item-warp {
  width: 100%;
  border: 1px #d9d9d9 solid;
  border-radius: 5px;
}

.warp-header {
  position: relative;
  font-size: 14px;
  color: #545353;
  height: 45px;
  line-height: 45px;
  border-bottom: 1px solid #d9d9d9;
  background-color: #f6f8fa;
  padding: 0 10px;
  box-sizing: border-box;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.warp-header:before {
  border-width: 8px;
  border-color: transparent;
  border-right-color: rgba(231, 231, 231, 0.63);
  position: absolute;
  top: 11px;
  right: 100%;
  left: -16px;
  display: block;
  width: 0;
  height: 0;
  pointer-events: none;
  content: " ";
  box-sizing: border-box;
  border-style: solid solid outset;
}

.warp-username {
  font-weight: bold;
  margin-right: 10px;
}

.warp-actions {
  position: absolute;
  right: 15px;
  top: 0;
  cursor: pointer;
}

.comment-body {
  padding: 5px;
  min-height: 120px;
}

.comment-body >>> .hljs {
  background-color: #f6f8fa;
}
</style>